<template>
    <div class="login-item">
        <h5 class="title" :style="{'color':Color}">用户登录</h5>
        <div class="form">
            <div class="item">
                <input name="username" type="text" v-model="username" placeholder="请输入账号">
            </div>
            <div class="item">
                <input name="password" type="password" v-model="password" placeholder="密码">
            </div>
            <div class="submit">
                <button :style="{'background':bgColor}" @click="Register">注册</button>
                <button :style="{'background':bgColor}" @click="Login">登录</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LoginItem',
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        Login() {
            this.$emit('onLogin',this.username,this.password)
        },
        Register() {
            this.$store.commit('setAnimate','turn-on')
            this.$router.push('/register')
        }
    },
    computed: {
        Color() {
            return this.$store.state.colorItem[this.$store.state.colorIndex].color
        },
        bgColor() {
            return this.$store.state.colorItem[this.$store.state.colorIndex].bgColor
        }
    }
}
</script>

<style scoped>
.login-item{
    background:#fff;
    border-radius:0.2rem;
    margin-top:-0.6rem;
    border:0.02rem solid #eee;
}
.login-item .title{
    font-size:0.4rem;
    text-align:center;
    padding:0.6rem 0;
}
.login-item .form{
    width:100%;
    padding:0.2rem 0.6rem;
}
.login-item .form .item{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-item .form .item:first-child{
    margin-bottom:0.4rem;
}
.login-item .form .item input{
    width:100%;
    font-size:0.32rem;
    padding:0.22rem 0.2rem;
    border:0.02rem solid rgb(197, 197, 197);
    border-radius:0.08rem;
    text-align: center;
}
.login-item .form .submit{
    padding:0.6rem 0;
    display:flex;
    justify-content:space-between;
}
.login-item .form .submit button{
    width:48%;
    padding:0.2rem 0;
    border-radius:0.1rem;
    color:#fff;
    border:0;
    font-size:0.32rem;
}
</style>